<template>
  <div id="index">
    <!--左侧菜单-->
    <div :class="{addMenus: list}" class="left-menus">
      <div class="menus-head-img">
        <img src="../../assets/index/logo3.png" class="logo" >
      </div>
      <div v-for="(menu, index) in menus" v-show="menus.length > 0" v-if="menu.status === 'enabled'" :key="index" class="menus-father">
        <p :class="{ addFather: menu['child']}" class="father-title" @click="showChildren(index)">
          <i :class="'fa fa-' + menu.img"/>
          {{ menu.title }}
          <i/>
        </p>
        <div v-for="(child, childIndex) in menu.children" v-show="menu['child']" v-if="child.status === 'enabled'" :key="childIndex" class="menus-children">
          <p
            :class="{ addChildren: childrenclass && child.path === menus[fatherNum].children[childNum].path}"
            class="children-title"
            @click="goto(index, childIndex)">{{ child.title }}</p>
        </div>
      </div>
    </div>
    <div :class="{addbutton: list}" class="backto" @click="back">
      <img src="../../assets/index/back.png" >
    </div>
    <!--右侧内容-->
    <div :class="{addRight: list}" class="right-content">
      <div :class="{addHead: list}" class="head">
        <div class="head-left">
          <!--<i class="iconfont icon-wangye" @click="opennew"></i>-->
          <i class="iconfont icon-refresh" @click="reload"> 刷新</i>&nbsp;&nbsp;&nbsp;
          <span style="cursor: pointer" @click="goKankan">世贸云</span>
        </div>
        <div class="head-right">
          <div class="user-name">
            <span class="user-nickname">{{ this.$store.getters.auth('uname') }} <i class="iconfont icon-icon-arrow-bottom2"/></span>
            <div class="list-bottom">
              <!--<p class="yonghu" @click="gotos(0)">{{this.$store.getters.auth('group')}}</p>-->
              <!--<p @click="gotos(1)">修改资料</p>-->
              <p @click="gotos(2)">修改密码</p>
              <p @click="gotos(3)">退出</p>
            </div>
          </div>
          <i class="iconfont icon-shezhi setting"/>
        </div>
        <div class="clear"/>
      </div>
      <div class="content">
        <div v-if="this.$route.path === '/index'" class="welcome">
          <p>欢迎登录世贸云管理平台</p>
        </div>
        <div v-else>
          <div class="content-top">
            <span class="content-title">{{ listName }}</span>
          </div>
          <div class="content-details">
            <router-view v-if="isRouterAlive" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import store from '@/store'
import '@/assets/adminicon/css/font-awesome.min.css'

export default {
  name: 'Index',
  store: store,
  data() {
    return {
      childNum: 0,
      fatherNum: 0,
      list: false,
      listName: '',
      isRouterAlive: true,
      childrenclass: true,
      menus: []
    }
  },
  computed: {
    status: function() {
      return this.$store.state.auth.status
    }
  },
  watch: {
    status: function() {
      if (this.$store.state.auth.status === 'need') {
        this.$message.error('请先登录')
        this.$router.push({
          path: '/'
        })
      }
    },
    '$route'(to, from) {
      this.start()
    }
  },
  mounted() {
    this.$store.dispatch('getAuth')
    console.log(this.$store.state.auth.status)
    if (this.$store.state.auth.status !== 'in') {
      this.$message.error('请先登录')
      this.$router.push({
        path: '/'
      })
    } else {
      this.menus = []
      this.menus = this.$store.getters.auth('acos')
      this.start()
      // this.refund()
    }
  },
  methods: {
    goKankan() {
      window.open('https://new.inkankan.com/')
    },
    refund() {
      const that = this
      this.$g.ajax({
        path: 'accountrecords/refund',
        method: 'get',
        cbSuccess: function(data) {
          console.log(data.memo)
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
    opennew() {
      window.open('https://www.inkankan.com')
    },
    start() {
      if (this.$route.path === '/index') {
        this.childrenclass = false
        return false
      } else {
        this.childrenclass = true
      }
      if (this.menus.length < 1) {
        return false
      }
      for (const i in this.menus) {
        for (const j in this.menus[i].children) {
          if (this.menus[i].children[j].path === '/refund/index') {
            this.refund()
          }
          if (this.menus[i].children[j].path === this.$route.path) {
            this.childNum = j
            this.fatherNum = i
            this.listName = this.menus[this.fatherNum].children[this.childNum].title
          }
        }
      }

      /* 回答路由 */
      const routess = this.$route.path.split('/')[0] + '/' + this.$route.path.split('/')[1] + '/' + this.$route.path.split('/')[2]
      if (routess === '/questions/view' ||
        routess === '/questionanswers/index' ||
        routess === '/qacomments/index') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/questions/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/questions/view') {
          this.listName = '问题详情'
        }
        if (routess === '/qacomments/index') {
          this.listName = '回答评论管理'
        }
        if (routess === '/questionanswers/index') {
          this.listName = '回答管理'
        }
      }
      //  活动路由
      if (routess === '/events/index' || routess === '/events/tickets' || routess === '/events/users') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/events/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/events/tickets') {
          this.listName = '门票列表'
        }
        if (routess === '/events/users') {
          this.listName = '报名人列表'
        }
      }
      /* 文章路由 */
      if (routess === '/articles/view' ||
        routess === '/articlereplies/index' ||
        routess === '/articlereplycomments/index') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/articles/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/articles/view') {
          this.listName = '文章详情'
        }
        if (routess === '/articlereplies/index') {
          this.listName = '评论管理'
        }
        if (routess === '/articlereplycomments/index') {
          this.listName = '回复管理'
        }
      }
      // 用户路由
      if (routess === '/users/view' ||
        routess === '/users/index') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/users/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/users/view') {
          this.listName = '用户详情'
        }
      }
      // 会员路由
      if (routess === '/bonuses/claimcode' ||
        routess === '/bonuses/passwordlist') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/bonuses/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/bonuses/claimcode') {
          this.listName = '福利领取码列表'
        } else if (routess === '/bonuses/passwordlist') {
          this.listName = '福利密码列表'
        }
      }
      // 广告路由
      if (routess === '/advertisement/total') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/advertisement/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/advertisement/total') {
          this.listName = '广告管理'
        }
      }
      // 视频路由
      if (routess === '/video/total' || routess === '/video/user') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/video/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/video/total') {
          this.listName = '视频管理'
        }
        if (routess === '/video/user') {
          this.listName = '视频观看用户指定'
        }
      }
      // 直播路由
      if (routess === '/lives/index' || routess === '/liveusers/user') {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/lives/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/lives/index') {
          this.listName = '直播管理'
        }
        if (routess === '/liveusers/user') {
          this.listName = '直播观看用户指定'
        }
      }
      //  评论管理
      if (routess === '/comments/index' || routess.indexOf('/reply/index') >= 0) {
        for (const i in this.menus) {
          for (const j in this.menus[i].children) {
            if (this.menus[i].children[j].path === '/comments/index') {
              this.childNum = j
              this.fatherNum = i
            }
          }
        }
        if (routess === '/comments/index') {
          this.listName = '评论管理'
        }
        if (routess.indexOf('/reply/index') >= 0) {
          this.listName = '回复列表'
        }
      }
      /* ------------------ */
      this.openfather(this.fatherNum)
    },
    back() {
      this.list = !this.list
    },
    openfather(index) {
      if (this.menus[index]['child'] === undefined) {
        this.$set(this.menus[index], 'child', false)
      }
      this.$set(this.menus[index], 'child', true)
    },
    showChildren(index) {
      if (this.menus[index]['child'] === undefined) {
        this.$set(this.menus[index], 'child', false)
      }
      this.$set(this.menus[index], 'child', this.menus[index]['child'] === false)
    },
    goto(index, childIndex) {
      this.fatherNum = index
      this.childNum = childIndex
      this.listName = this.menus[index].children[childIndex].title
      this.$router.push(this.menus[index].children[childIndex].path)
    },
    gotos(num) {
      if (num === 0) {
      } else if (num === 1) {
        this.$router.push({
          path: '/usermsg/personaldata'
        })
      } else if (num === 2) {
        this.$router.push({
          path: '/usermsg/password'
        })
      } else {
        this.$store.dispatch('loginOut')
        this.$router.push({
          path: '/'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#index {
  background: #F2F2F2;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  .left-menus {
    background: #2f3235;
    width: 228px;
    white-space: nowrap;
    overflow-y: scroll;
    overflow-x: hidden;
    text-overflow: ellipsis;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0 6px;

    .menus-head-img {
      img {
        max-width: 180px;
        margin: 15px 0 15px 20px;
      }
    }

    .menus-father {
      .father-title {
        margin: 25px 0;
        color: #858585;
        font-size: 16px;
        cursor: pointer;

        i {
          display: inline-block;
          text-align: center;
          margin: 0 20px;
          width: 18px;
        }
      }

      .father-title:hover {
        color: #fff;
      }

      .addFather {
        color: #fff;
      }

      .menus-children {
        height: 42px;
        line-height: 40px;

        .children-title {
          color: #858585;
          font-size: 16px;
          cursor: pointer;
          padding: 0 0 0 64px;
        }

        .children-title:hover {
          color: #fff;
          background: #3A4249;
        }

        .addChildren {
          color: #fff;
          font-size: 15px;
          background: #3A4249;
        }
      }
    }
  }

  .addMenus {
    width: 72px;
  }

  .backto {
    text-align: center;
    position: fixed;
    left: 215px;
    top: 51px;
    z-index: 2;
    cursor: pointer;
  }

  .addbutton {
    left: 60px;
  }

  .right-content {
    margin-left: 245px;
    min-width: 640px;

    .head {
      background: #fff;
      height: 40px;
      line-height: 38px;
      color: #858585;
      position: fixed;
      top: 0;
      right: 0;
      left: 245px;
      min-width: 640px;
      z-index: 99;

      i {
        margin-left: 35px;
      }

      i:hover {
        color: #666;
        cursor: pointer;
      }

      .head-left {
        float: left;
      }

      .head-right {
        float: right;

        .user-name {
          display: inline-block;
          height: 40px;
          font-size: 16px;
          line-height: 38px;
          cursor: pointer;
          position: relative;

          .user-nickname {
            i {
              margin-left: 10px;
            }
          }

          .list-bottom {
            width: 120px;
            position: absolute;
            padding: 0 2px;
            top: 40px;
            right: -10px;
            background: #fff;
            border: 1px solid #F2F2F2;
            border-top: 0;
            display: none;
            z-index: 99;

            p {
              font-size: 14px;
              color: #c3c3c3;
              text-align: center;
              line-height: 30px;
            }

            p:hover {
              background: #F2F2F2;
              color: #666;
            }

            .yonghu {
              background: #f5f5f5;
              color: #666;
            }
          }
        }

        .user-name:hover {
          .list-bottom {
            display: block;
          }
        }

        .setting {
          margin: 0 36px;
        }
      }
    }

    .addHead {
      left: 84px;
    }

    .content {
      background: #fff;
      margin-top: 50px;

      .content-top {
        padding: 10px 0;

        .content-title {
          font-size: 20px;
          color: #000;
          margin-left: 30px;
          padding-left: 10px;
          line-height: 30px;
          border-left: 3px solid #4FA9B5;
        }
      }

      .welcome {
        float: left;
        width: 640px;

        p {
          font-size: 36px;
          font-weight: bold;
          color: rgba(111, 111, 111, 0.5);
          margin-top: 10%;
          text-align: center;
        }
      }

      .content-details {
        padding: 10px 30px;
      }
    }
  }

  .addRight {
    margin-left: 77px;
  }
}
</style>
